<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			.itemRow {
				background-color: blanchedalmond;
				height: 200px;
			}
		</style>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-xs-8 col-sm-3 col-md-8 itemRow">.手机10 .平板6 .pc8列</div>
				<div class="col-xs-6 col-md-2 col-md-offset-2 itemRow col-md-2">.手机6 .Pc4</div>
			</div>

		</div>


		<div class="container">
			<h1>h1. Bootstrap heading <small>副标题</small></h1>
			<blockquote>
				You can use the <strong>字体着重</strong>mark <em> </em> tag to <mark>highlight</mark> text.

			</blockquote>

			<blockquote>
				<p> 引用 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
				<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>

			<pre>console.log(this) <button style="float: right;" class="btn btn-xs" > copy </button>
		</div></pre>

			<div class="container">
				<table class="table table-bordered table-hover  ">
					<tr>
						<th> <kbd>#</kbd> </th>
						<th> First Name </th>
						<th> Last Name </th>
						<th> Username </th>
					</tr>
					<tr>
						<td> <strong>1</strong> </td>
						<td> Mark</td>
						<td> Otto</td>
						<td>@mdo</td>
					</tr>
					<tr>
						<td> 2 </td>
						<td> Mark</td>
						<td> Otto</td>
						<td>@mdo</td>
					</tr>
					<tr>
						<td> 3 </td>
						<td> Mark</td>
						<td> Otto</td>
						<td>@mdo</td>
					</tr>
				</table>

			</div>

			<div class="container" style="margin: 60px auto;">

				<table class="table  table-hover">
					<tr class="">
						<th><kbd>id</kbd></th>
						<th>昵称</th>
						<th>留言</th>
						<th>操作</th>
					</tr>

					<tr>
						<td>01121</td>
						<td>Hez</td>
						<td>学习jQUery中</td>
						<td> <button type="button" class="btn btn-danger btn-xs"> 删除 </button> <button type="button"
								class="btn btn-xs"> 编辑 </button> </td>
					</tr>
					<tr>
						<td>01121</td>
						<td>Hez</td>
						<td>学习jQUery中</td>
						<td> <button type="button" class="btn btn-danger btn-xs"> 删除 </button> </td>
					</tr>

				</table>
				<p class="text-center">Center <strong>rendered as bold text</strong>aligned text <kbd>cd</kbd> .</p>

			</div>








			<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
			<script src="jquery.js"></script>
			<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
			<script src="bootstrap.min.js"></script>、
			<script>
				console.log(this)
			</script>
	</body>
</html>